<template>
  <div class="dataIndex">
    <h1>抽屉效果</h1>

    <div class="dataIndex">
      <el-button type="primary" @click="DrawerInner">多层嵌套
      </el-button>
    </div>

    <el-drawer :visible.sync="drawer" :size="600">
      <div>
        <div> title <b>123</b></div>
        <el-button @click="innerDrawer = true">打开里面的!</el-button>
        <el-drawer title="我是里面的" :append-to-body="true" :size="500" :visible.sync="innerDrawer">
          <!-- <DrawerDdo :obj="currentObj"></DrawerDdo> -->
          <component v-bind:is="component" :obj="currentObj"></component>
        </el-drawer>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import DrawerSon from "@/components/elementList/DrawerSon.vue";
export default {
  name: "drawerBox1",
  components: { DrawerSon },
  data() {
    return {
      listData: [],
      drawer: false,
      innerDrawer: false,
      currentObj: this,
      component: "",
    };
  },

  mounted() {
    this.init();
  },
  methods: {
    init() {
      let me = this;
    },
    DrawerInner() {
      //打开多层嵌套
      this.drawer = true;
      this.component = "DrawerSon";
    },
    hideInnerDrawer() {
      this.innerDrawer = false;
    },
  },
};
</script>
<style scoped>
.dataIndex {
  height: 100%;
}
</style>
